<template>
    <div>
        <el-card class="box-card">
            <el-form label-width="80px">
                <el-form-item class="large-font"><h4>您今天已经使用了{{todaySum}}次，还剩{{freeSum}}次免费次数</h4></el-form-item>
                <el-form-item label="你想说：" class="large-font">
                    <el-input type="textarea" v-model="qq" rows="5" placeholder="请输入你的问题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="send">发送</el-button>
                </el-form-item>
                <el-form-item label="回复：" class="large-font">
                <div class="large-font">
                <!-- 直接文本显示（单向绑定） -->
                    {{ answer }}
                </div>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import axios from "../plugins/axios.js";
export default {
    data() {
        return {
            qq: "",
            answer: "",
            todaySum:0,
        }
    },
    // beforeCreate() {
    //     if (sessionStorage.getItem("user") == null) {
    //         this.$router.push("/login");
    //     }
    // },
    // 计算属性freeSum
    computed:{
        freeSum:function(){
            return (5-this.todaySum<0?0:5-this.todaySum);
        }
    },
    watch: {
        answer:{
            handler(newVal, oldVal){
                axios.get("http://localhost:9000/record/count")
                .then((resp)=>{
                    if(resp.data.code==2000){
                        this.todaySum=resp.data.data;
                    }
                })
            },
            deep:true,
            immediate:true
        }
    },
    methods: {
        send: function () {
            var curUser = JSON.parse(sessionStorage.getItem("user"));
            // axios.post("http://localhost:9000/llm/qianwen", "say=" + this.qq + "&userId=" + curUser.id)
            // 无需加uid因为凭证中含有
            axios.post("http://localhost:9000/llm/qianwen", "say=" + this.qq)
                // 箭头函数不会创建自己的this环境，否则会this会变回为axios
                .then((resp) => {
                    if(resp.data.code===2000)
                        this.answer = resp.data.data; 
                    else{
                        alert(resp.data.msg);
                    }
                }).catch((err) => {
                    console.log(err);
                    alert("发送失败"+err);
                });
        }
    }
}
</script>


<style scoped>
.box-card {
    background-color: rgb(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 10px;
    border: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 800px;
    margin: 150px auto; /* 居中显示 */
    transition: transform 0.3s ease-in-out;
}
.large-font{
    font-size: large;
}
</style>